<template>
  <div class="list"  >
    <!-- 列表头部 -->
    <div class="listTitle">
      <span
        @click="dian(index)"
        v-for="(item, index) in listTitle"
        :key="index"
        >{{ item }}</span
      >
    </div>
    <!-- 店铺信息 -->
    <!-- 点击正在抢购时显示 -->
    <!-- <div v-if="cIndex == 0" class="box"> -->
      <!-- <div class="dian" v-for="(item, index) in list1" :key="index"> -->
      <div class="dian" v-for="(item, index) in list" :key="index" >
        <div class="imgbox">
          <img :src="item.picture" alt="" />
        </div>
        <!-- 店铺详情 -->
        <div class="neirong">
          <!-- 地址 -->
          <div class="dizhi">
            <span>{{ item.name }}</span>
            <span>|</span>
            <span>{{ item.unit }}</span>
          </div>
          <!-- 标题 -->
          <div class="title">
            <span>{{ item.name }}</span>
          </div>
          <!-- 马上抢 -->
          <div class="qing">
            <!-- 左边 -->
            <div class="price">
              <!-- 上边 -->
              <div class="tuan">
                <span>爆爆团价</span>
              </div>
              <!-- 下边 -->
              <div class="yaun">
                <span>￥{{ item.min_price }}</span>
                <span>{{ item.promotion_info }}折</span>
              </div>
            </div>
            <!-- 右边 -->
            <div class="btn">
              <span @click="lingqu(item, index)">{{
                item.qing ? "已抢" : "马上抢"
              }}</span>
            </div>
          </div>
          <!-- 已售 -->
          <div class="shou">
            <span>￥{{ item.min_price }}</span>
            <span>{{ item.month_saled_content }}</span>
          </div>
        </div>
      </div>
    <!-- </div> -->
   
  </div>
</template>

<script>
import { shop_list, tuan_list, user_login } from '../../utils/api'

export default {
  data() {
    return {
      cIndex: 0,
      listTitle: ["正在抢购", "上新预告"],
      // list1:[],
      // list2:[],
      list:[],
    };
  },
  mounted(){
    this.nerrong(this.cIndex);
  },
  methods: {
    nerrong(cIndex){
    // nerrong(){
    //   tuan_list( {status:0} ).then(
      tuan_list( {status:cIndex} ).then(
      (res)=>{
      console.log(res.data);
      this.list = res.data.list;
      for(var i =0 ; i <this.list.length;i++){
        // this.list[i].qing = false;
        this.$set(this.list[i],'qing',false)
      }
      }
    ) 
    },
    // 点击更换渲染列表
    dian(index) {
      this.cIndex = index;
      console.log(this.cIndex);
      this.nerrong(this.cIndex);
    },
    // 点击事件点击红包内容改变
    lingqu(item, index) {
      // 修改当前点击红包对象的qing属性的值，改为true
      console.log(item.qing);
      item.qing = true;
      //   console.log(this.list);
    },
  },
};
</script>

<style lang='scss' scoped >
// 正在抢购
.list {
  box-sizing: border-box;
  padding: 0 15px;
}

.list .listTitle {
  display: flex;
  box-sizing: border-box;
  padding-bottom: 15px;
  background-color: orangered;
  padding-top: 15px;
}

.list .listTitle span {
  display: inline-block;
  color: white;
  margin-right: 15px;
}

// 店铺
.list .dian {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  padding: 10px;
  border-radius: 10px;
  background-color: white;
  margin-bottom: 4px;
}

// 右边图片
.list .dian .imgbox {
  height: 100px;
  margin-right: 10px;
}

.list .dian .imgbox img {
  height: 100%;
}

// 左边店铺信息

// 店铺名和地址
.list .dian .neirong .dizhi {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

// 店铺标题信息
.list .dian .neirong .title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: black;
}

// 马上抢
.list .dian .neirong .qing {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.list .dian .neirong .price .tuan {
  font-size: 10px;
  color: red;
  margin-bottom: 5px;
}

.list .dian .neirong .price .yaun {
  color: red;
  font-size: 14px;
}

.list .dian .neirong .price .yaun span:nth-child(2) {
  font-size: 10px;
  display: inline-block;
  border: 1px solid red;
  margin-left: 5px;
}

.list .dian .neirong .btn {
  margin-top: 10px;
  width: 62px;
  text-align: center;
  height: 24px;
  line-height: 24px;
  color: white;
  background-color: red;
  border-radius: 10px;
}

// 已售

.list .dian .neirong .shou {
  display: flex;
  justify-content: space-between;
}

.list .dian .neirong .shou span:nth-child(1) {
  color: #999;
  text-decoration: line-through;
  font-size: 10px;
}

.list .dian .neirong .shou span:nth-child(2) {
  color: red;
  font-size: 10px;
}
</style>